<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>电子书</title>
<link rel="stylesheet" type="text/css" href="/css/front/conn.css"/>
<link rel="stylesheet" type="text/css" href="/css/front/list2.css"/>

<script type="text/javascript" src="/js/ebook/extras/jquery.min.1.7.js"></script>
<script type="text/javascript" src="/js/ebook/extras/jquery-ui-1.8.20.custom.min.js"></script>
<script type="text/javascript" src="/js/ebook/extras/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="/js/ebook/extras/modernizr.2.5.3.min.js"></script>
<script type="text/javascript" src="/js/ebook/lib/hash.js"></script>

<style type="text/css">
#canvas{
	margin-top:20px;
	margin-bottom:20px;
	width:855px;
}
/*
.sj-book .p1,
.sj-book .p2,
.sj-book .p3, 
.sj-book .p111, 
.sj-book .p112{
	background-color:white;
	background-image:url(http://img.gzcanr.com/images/ebook/pics/book-covers.jpg) !important;
}

.sj-book .p111{
	background-position:-960px 0 !important;
}


.sj-book .p112{
	background-position:-1440px 0 !important;
}
*/


.sj-book .p1,
.sj-book .p2,
.sj-book .p3, 
.sj-book .p{#$nums-1#}, 
.sj-book .p{#$nums#}{
	background-color:white;
	background-image:url(http://img.gzcanr.com/images/ebook/pics/book-covers.jpg) !important;
}

.sj-book .p{#$nums-1#}{
	background-position:-960px 0 !important;
	display: none;
}


.sj-book .p{#$nums#}{
	background-position:-1440px 0 !important;
}
</style>
</head>
<body>
<!-- 头部导航开始 -->
{# include file="$tpl_root_path/front/public/_header.html" #}
<!-- 头部导航结束 -->
<div class="bread top-fixed">
   <h6><a href="/">首页</a>>电子书</h6>
</div>

<!-- 电子书begin --->

<div id="ebook-pages-box">
		{#foreach from=$list item=l key=k#}
          <span data-src="{#$l.BPATH#}" data-page="{#$k+1#}" ></span>
		{#/foreach #}
</div>


<div id="canvas">
	<div id="book-zoom">
    
		<div class="sj-book">
			<div depth="1" class="hard"> <div class="side"></div> </div>
			<div depth="1" class="hard front-side"> <div class="depth"></div> </div>
			<div class="own-size"></div>
			<div class="own-size even"></div>
			<div class="hard fixed back-side p{#$nums-1#}"> <div class="depth"></div> </div>
			<div class="hard p{#$nums#}"></div>
		</div>
        
	</div>
    
	<div id="slider-bar" class="turnjs-slider">
		<div id="slider"></div>
	</div>
    
</div>


<!-- 电子书over -->
 


<!-- 咨询栏begin -->
{# include file="$tpl_root_path/front/public/_contact.html" #}

<!-- 咨询栏over -->



<!-- 底部begin -->
{# include file="$tpl_root_path/front/public/_footer.html" #}
<!-- 底部over -->


<script type="text/javascript">
var pages_num = '{#$nums#}';
function loadApp() {
	
	var flipbook = $('.sj-book');

	// Check if the CSS was already loaded
	
	if (flipbook.width()==0 || flipbook.height()==0) {
		setTimeout(loadApp, 10);
		return;
	}

	// Mousewheel

	$('#book-zoom').mousewheel(function(event, delta, deltaX, deltaY) {

		var data = $(this).data(),
			step = 30,
			flipbook = $('.sj-book'),
			actualPos = $('#slider').slider('value')*step;

		if (typeof(data.scrollX)==='undefined') {
			data.scrollX = actualPos;
			data.scrollPage = flipbook.turn('page');
		}

		data.scrollX = Math.min($( "#slider" ).slider('option', 'max')*step,
			Math.max(0, data.scrollX + deltaX));

		var actualView = Math.round(data.scrollX/step),
			page = Math.min(flipbook.turn('pages'), Math.max(1, actualView*2 - 2));

		if ($.inArray(data.scrollPage, flipbook.turn('view', page))==-1) {
			data.scrollPage = page;
			flipbook.turn('page', page);
		}

		if (data.scrollTimer)
			clearInterval(data.scrollTimer);
		
		data.scrollTimer = setTimeout(function(){
			data.scrollX = undefined;
			data.scrollPage = undefined;
			data.scrollTimer = undefined;
		}, 1000);

	});

	// Slider

	$( "#slider" ).slider({
		min: 1,
		max: 100,

		start: function(event, ui) {

			if (!window._thumbPreview) {
				_thumbPreview = $('<div />', {'class': 'thumbnail'}).html('<div></div>');
				setPreview(ui.value);
				_thumbPreview.appendTo($(ui.handle));
			} else
				setPreview(ui.value);

			moveBar(false);

		},

		slide: function(event, ui) {

			setPreview(ui.value);

		},

		stop: function() {

			if (window._thumbPreview)
				_thumbPreview.removeClass('show');
			
			$('.sj-book').turn('page', Math.max(1, $(this).slider('value')*2 - 2));

		}
	});


	// URIs
	
	Hash.on('^page\/([0-9]*)$', {
		yep: function(path, parts) {

			var page = parts[1];

			if (page!==undefined) {
				if ($('.sj-book').turn('is'))
					$('.sj-book').turn('page', page);
			}

		},
		nop: function(path) {

			if ($('.sj-book').turn('is'))
				$('.sj-book').turn('page', 1);
		}
	});

	// Arrows

	$(document).keydown(function(e){

		var previous = 37, next = 39;

		switch (e.keyCode) {
			case previous:

				$('.sj-book').turn('previous');

			break;
			case next:
				
				$('.sj-book').turn('next');

			break;
		}

	});


	// Flipbook

	flipbook.bind(($.isTouch) ? 'touchend' : 'click', zoomHandle);

	flipbook.turn({
		elevation: 50,
		acceleration: !isChrome(),
		autoCenter: true,
		gradients: true,
		duration: 1000,
		pages: pages_num,
		when: {
			turning: function(e, page, view) {
				
				var book = $(this),
					currentPage = book.turn('page'),
					pages = book.turn('pages');

				if (currentPage>3 && currentPage<pages-3) {
				
					if (page==1) {
						book.turn('page', 2).turn('stop').turn('page', page);
						e.preventDefault();
						return;
					} else if (page==pages) {
						book.turn('page', pages-1).turn('stop').turn('page', page);
						e.preventDefault();
						return;
					}
				} else if (page>3 && page<pages-3) {
					if (currentPage==1) {
						book.turn('page', 2).turn('stop').turn('page', page);
						e.preventDefault();
						return;
					} else if (currentPage==pages) {
						book.turn('page', pages-1).turn('stop').turn('page', page);
						e.preventDefault();
						return;
					}
				}

				updateDepth(book, page);
				
				if (page>=2)
					$('.sj-book .p2').addClass('fixed');
				else
					$('.sj-book .p2').removeClass('fixed');

				if (page<book.turn('pages'))
					$('.sj-book .p'+(pages_num-1)).addClass('fixed');
				else
					$('.sj-book .p'+(pages_num-1)).removeClass('fixed');

				Hash.go('page/'+page).update();
					
			},

			turned: function(e, page, view) {

				var book = $(this);

				if (page==2 || page==3) {
					book.turn('peel', 'br');
				}

				updateDepth(book);
				
				$('#slider').slider('value', getViewNumber(book, page));

				book.turn('center');

			},

			start: function(e, pageObj) {
		
				moveBar(true);

			},

			end: function(e, pageObj) {
			
				var book = $(this);

				updateDepth(book);

				setTimeout(function() {
					
					$('#slider').slider('value', getViewNumber(book));

				}, 1);

				moveBar(false);

			},

			missing: function (e, pages) {

				for (var i = 0; i < pages.length; i++) {
					addPage(pages[i], $(this));
				}

			}
		}
	});


	$('#slider').slider('option', 'max', numberOfViews(flipbook));

	flipbook.addClass('animated');

	// Show canvas

	$('#canvas').css({visibility: ''});
}

// Hide canvas

$('#canvas').css({visibility: 'hidden'});

// Load turn.js

yepnope({
	test : Modernizr.csstransforms,
	yep: ['/js/ebook/lib/turn.min.js'],
	nope: ['/js/ebook/lib/turn.html4.min.js', '/css/ebook/steve/jquery.ui.html4.css', '/css/ebook/steve/steve-jobs-html4.css'],
	both: ['/js/ebook/steve-jobs.js', '/css/ebook/steve/jquery.ui.css', '/css/ebook/steve/steve-jobs.css'],
	complete: loadApp
});

</script>
</body>
</html>
